export const worldMap3d = () => {
    return `
        
<template>
  <div>
    <div ref="echartsMap" id="mainChina"></div>
  </div>
</template>

<script setup>
import { ref, reactive, nextTick, onMounted } from "vue";
import "echarts";

import "echarts-gl";
var data_tmp = ['中国', '德国', '澳大利亚', '美国', '欧洲', '意大利', '新加坡', '加拿大', '日本', '韩国', '卢森堡', '英国', '波兰']

 
const baseTexture = ref("");
const echartsMap = ref();
const drawEarth = () => {
  var myChart = echarts.init(echartsMap.value);
  window.addEventListener("resize", function() {
    myChart.resize();
  });

  let option = {
    name: "3D",
    backgroundColor: "transparent",

    globe: {
      // 组件提供了地球的绘制以及相应的坐标系，开发者可以在上面展示三维的散点图、气泡图、柱状图、飞线图。
      silent: false,
      displacementScale: 0.8,
      baseTexture: baseTexture.value, // 2D地球纹理
      // baseTexture: _this.baseTexture.getRenderedCanvas({
      //   pixelRatio: 2 // 高分辨率
      // }),
      globeRadius: 170, // 球面半径
      environment: "auto",
      shading: "color",
      atmosphere: {
        // 地球外部大气层相关设置
        show: true,
        offset: 9,
        color: "#ffffff",
        glowPower: 7,
        innerGlowPower: 4, // 内部，值越大大气层越小
      },
      light: {
        // 光照阴影
        main: {
          // 场景主光源的设置，在 globe 组件中就是太阳光。
          color: "#fa3950", // 光照颜色
          intensity: 1000, // 光照强度
          alpha: 40,
          beta: -30,
        },
        ambient: {
          //全局的环境光设置。
          color: "#fa3950",
          intensity: 1000,
        },
      },
      viewControl: {
        alpha: 30,
        beta: 160,
        autoRotate: true, // 开启自动旋转
        autoRotateAfterStill: 10,
        distance: 240,
      },
      emphasis: {
        // 鼠标悬浮时的配置项，这里你可以设置地球停止旋转等配置项
        animationDurationUpdate: 0, // 设置动画持续时间为0，即无动画，地球停止旋转等配置项...
      },
    },
    series: [],
    z: 999,
  };

  myChart.setOption(option);
};
const init = (china) => {
  // 基于准备好的dom，初始化echarts实例

  echarts.registerMap("world", china);
  let canvas = document.createElement("canvas");
  //创建 Texture
  baseTexture.value = echarts.init(canvas, null, {
    width: 4096,
    height: 2048,
  });
  baseTexture.value.setOption({
    backgroundColor: "#002975", // 球体颜色
    tooltip: {
      // 配置 Tooltip
      show: true,
      padding: 0,
      // enterable: true,
      transitionDuration: 1,
      textStyle: {
        color: "#000",
        decoration: "none",
      },
      trigger: "item",
      position: "top",
      // 其他 Tooltip 配置...
      formatter: function(params) {
        console.log(params);
      },
    },
    geo: {
      // 2D地球
      id: "ztzbGeo",
      type: "map",
      map: "world",
      silent: false,
      left: -0,
      top: 0,
      right: 0,
      bottom: 0,
      zlevel: 9,
      z: 9,
      boundingCoords: [
        //定义定位的左上角以及右下角分别所对应的经纬度
        [-180, 90],
        [180, -90],
      ],
      roam: true, // 是否开启鼠标缩放和平移漫游
      itemStyle: {
        // 国家颜色
        normal: {
          areaColor: "#1d63df", // 默认展示的颜色
          borderColor: "#000c2d",
        },
        emphasis: {
          disabled: true,
          areaColor: "#378aff", // 被选中时的颜色
          borderColor: "#c4e6ff",
          borderWidth: 4,
        },
      },
      label: {
        normal: {
          fontSize: 50,
          show: true,
          // offset: [0, 0], // 根据需要调整x和y的偏移
          formatter: function(params) {
            if (data_tmp.indexOf(params.name) > -1) {
              return "{one|" + params.name + "}";
            } else {
              return "{two|" + params.name + "}";
            }
          },
          rich: {
            one: {
              color: "#d2e7ff",
              fontSize: 28,
            },
            two: {
              color: "rgba(0,0,0,0)",
              // color: "red",
              fontSize: 20,
            },
          },
        },
        emphasis: {
          rich: {
            one: {
              color: "#d2e7ff",
              fontSize: 30,
            },
            two: {
              color: "rgba(0,0,0,0)",
              fontSize: 20,
            },
          },
        },
      },
    },
    series: [],
  });

  drawEarth();
};
const state = reactive({});
onMounted(() => {
  fetch("/vue.example/echarts/ChinaCenterWorld.json")
    .then(function(response) {
      //response.status表示响应的http状态码
      if (response.status === 200) {
        // json是返回的response提供的一个方法,
        // 会把返回的json字符串反序列化成对象,也被包装成一个Promise了
        return response.json();
        //
      } else {
        return {};
      }
    })
    .then(function(data) {
      //响应的内容
      init(data);
      // 响应数据格式化
    });
});
</script>

<style scoped>
.content {
  position: relative;
  width: 100%;
  box-shadow: 0px 3px 50px 1px rgba(0, 101, 175, 0.4);
}
#mainChina {
  width: 100%;
  height: 600px;
  background-color: #00184f;
}
</style>


    
    `;
  };
  